<template>
    <div>
        <table border="1">
            <tr>
                <td colspan="5">
                    <input type="text" v-model="sousuo">
                    <input type="button" @click="init" value="搜索">
                </td>
            </tr>
            <tr>
                <td>序号</td>
                <td>标题</td>
                <td>内容</td>
                <td>作者</td>
                <td>操作</td>
            </tr>
            <tr v-for="(i,index) in bookslist">
                <td>{{index+1}}</td>
                <td>{{i.title}}</td>
                <td>{{i.content}}</td>
                <td>{{i.author}}</td>
                <td>
                    <button @click="del(i.id)">删除</button>
                    <a :href="'http://localhost:8080/#/alter?id='+i.id">修改</a>
                </td>
            </tr>
        </table>
        <!-- <button>ddd</button> -->
        <button @click="init(i)" v-for="i in page_range">{{i}}</button>
    </div>
</template>

<script>
export default {
    data:function(){
        return{
            sousuo:'',
            bookslist:[],
            page_range:''
        }
    },

    methods:{
        init:function(i){
            let formData = new FormData();
            formData.append('sousuo', this.sousuo),
            formData.append('i', i),

            this.axios({
                url:'http://127.0.0.1:8000/show/',
                method: 'post',
                data: formData,
            }).then((res)=>{
                if (res.data.code==200)
                {
                    this.bookslist = res.data.message;
                    this.page_range = res.data.page_range
                }
            })
        },
        del(id){

            let formData = new FormData();
            formData.append('id', id)

            this.axios({
                url:"http://127.0.0.1:8000/del/",
                method: 'post',
                data:formData,
            }).then((res)=>{
                if(res.data.code==200)
                {   
                    alert('删除成功');
                    location.reload()
                }else{
                    alert('删除出错，请稍后再试')
                }
            })
        }
    },


    mounted(){
        this.init()
    }
}
</script>
